<template>
    <div class="box ">
        <div class="header"><h1>图书馆可视化</h1></div>
        <div class="row1 ">
            <div class="row1_1 ">
                <div class="row1_1_1 ">
                    <div class="panel border">
                        <Progress></Progress>
                    </div>
                    <div class="panel border">
                        <span style="text-align: center;color:#fff;margin-left: 1.5rem;">借阅书籍数量</span>
                        <div style="display: flex;margin-top: 0.5rem;">
                            <div style="flex: 1;">
                                <h4 style="text-align: center;color:#fff;font-size: 0.25rem">今日借阅</h4>
                                <br>
                                <span style="background-color:#3582bd;color: #fff;display:flex;justify-content: center; align-items: center;letter-spacing: 0.15rem">{{ dayTotal }}</span>
                            </div>
                            <div style="flex: 1">
                                <h4 style="text-align: center;color:#fff;font-size: 0.25rem">本月借阅</h4>
                                <br>
                                <span style="background-color:#3582bd;color: #fff;display:flex;justify-content: center; align-items: center;letter-spacing: 0.15rem">{{ monthTotal }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row1_1_2 ">
                    <div class="panel1 border">
                        <pieAnalyse></pieAnalyse>
                    </div>
                    <div class="panel2 border">
                        <ColumnChart></ColumnChart>
                    </div>
                </div>
            </div>
            <div class="row1_2 border">
                <Column></Column>
            </div>
            <div class="row1_3 border " style="background-color: #3582bd;height: 7rem">
                <div class="fontPos">
                    <span>实时动态借还</span>
                </div>
                <div class="table-wrapper">
                    <el-table
                            :data="realData"
                            style="height: 6rem"
                    >
                        <el-table-column
                                prop="status"
                                label="动态"
                                width="50">
                        </el-table-column>pm
                        <el-table-column
                                prop="userName"
                                label="姓名"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                prop="bookName"
                                label="书籍名称"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="borrowDate"
                                label="时间">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="row2">
            <div class="row2_1 border">
                <scatterChart></scatterChart>
            </div>
            <div class="row2_2 border">
                <pieChart></pieChart>
            </div>
            <div class="row2_3 border">
                <lineChart></lineChart>
            </div>
        </div>
    </div>
</template>


<script>
import "../../assets/flexible.js";
import pieAnalyse from "@/views/echarts/view/pieAnalyse"
import ColumnChart from '@/views/echarts/view/ColumnChart'
import scatterChart from '@/views/echarts/view/scatterChart'
import pieChart from '@/views/echarts/view/pieChart'
import lineChart from '@/views/echarts/view/lineChart'
import Column from '@/views/echarts/view/Column'
import Progress from '@/views/echarts/view/progress'
import request from "@/utils/request";

export default {
    components: {pieChart, pieAnalyse, ColumnChart, scatterChart, lineChart, Column, Progress},
    data() {
        return {
            realData: [],
            monthTotal: 1234,
            dayTotal: 1234
        }
    },
    methods: {
        getTotal() {
            request.get('/views/borrowCount', {}).then(res => {
                this.monthTotal = res.data.monthTotal
                this.dayTotal = res.data.dayTotal
            })
        },


        // 获取动态数据
        getUsersList() {
            request.get('/views/borrows10', {}).then(res => {
                this.realData = res.data
            })
        },
        // 动态数据
        showNotice() {
            this.marginTop -= 1
            if (this.marginTop < -36) {     // 滚上去36px后把前两条数据拉下来
                this.realData.push(this.realData[0])
                this.realData.push(this.realData[1])
                this.realData.shift()
                this.realData.shift()
                this.marginTop = 0
            }
        }
    },
    created() {
        this.getUsersList()
        this.getTotal()
        this.timer = setInterval(this.showNotice, 1000)
    }
}
</script>

<style src="../../assets/demo.css">

</style>
